<template>
  <div id="change">
    <ReturnPage />
    <div class="mt20 tp_box">
      <!-- 查询表单 -->
      <el-form
        size="mini"
        :inline="true"
        :model="query"
        class="demo-form-inline"
        ref="query"
      >
        <el-form-item label="配置文件名称:" prop="">
          <el-input
            v-model="query.configName"
            placeholder="请输入配置文件名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="ml10" @click="getList()"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="warning" class="ml10" @click="reset('query')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        height="calc(100vh - 280px)"
      >
        <el-table-column prop="configName" label="配置文件名称" align="center">
        </el-table-column>
        <el-table-column prop="hostIp" label="主机ip" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column
          prop="currentVersion"
          label="配置文件版本"
          align="center"
        >
          <template slot-scope="scope">
            {{ "v" + scope.row.currentVersion }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="change(scope.row.id)" size="mini"
              >配置还原</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tableData.length > 0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {
  getConfigchangeListApi,
  getRestoreConfigApi,
} from "@/api/automated/instrumentPanel";
export default {
  data() {
    return {
      total: "",
      //分页
      query: {
        hostId: "",
        pageNum: 1,
        pageSize: 10,
        configName: "",
        hostName: "",
      },
      tableData: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    reset(formName) {
      this.query.configName = "";
      this.getList();
    },
    //配置还原
    change(id) {
      this.$confirm(
        "此操作将覆盖远程主要的配置文件，请确认是否继续？",
        "提示",
        {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning",
        }
      )
        .then(async () => {
          console.log(id);
          let res = await getRestoreConfigApi(id);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async getList() {
      this.query.hostId = this.$route.query.hostid;
      let res = await getConfigchangeListApi(this.query);
      let { code, rows } = res;
      if (code == 200) {
        this.tableData = rows;
        this.total = res.total;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>